<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<title>聊天界面</title>
	<style type="text/css">
	    *{
	    	margin:0;padding:0;
	    }
	    li{
	    	list-style: none;position: relative;overflow:hidden;
	    }
        .body{
        	width:400px;height: 700px;border:1px solid #ccc;margin:50px auto;position: relative;
        }
        .user img{
        	width:50px;height: 50px;border-radius: 100%;
        }
        .header{
            position:relative;background:lightblue;height:100px;
        }
        .user{
        	position: absolute;top:20px;left:20px;
        }
        .info{
        	position: absolute;right:20px;top:50px;
        }
        .user_list li a img{
        	width:20px;height: 20px;
        }
        .user_list li a p{
        	position: absolute;top:0;left:25px;
        }
        .user_list{
        	padding:5px 5px;position: relative;top:50px;left:30px;
        }
        a{
        	text-decoration:none;
        }
        .footer{
        	height:50px;background: lightblue;position:absolute;width:400px;bottom:0;
        }
        .talk{
        	width:350px;height:300px;border:1px solid #ccc;position: absolute;top:100px;left:25px;
        }
        .send{
        	position: absolute;bottom:0;width:350px;height:150px;top:420px;
        	left:25px;
        }
        #ul1{
            overflow: hidden;
        }

	</style>
    
</head>
<body>

    <form action="send.php?id=<?php echo $per_res["id"]; ?>" method="post">

    <div class="body">
    
        <div class="header">
        	<p class="user"><img src="images/a.jpg" alt="">&nbsp;<?php echo $res['username']?></p>
        	<p class="info">消息(2)</p>
        </div>

        <div class="content" style="position:relative;">
            <div class="group">
            	<a a href="onload.php" class="left" style="position: absolute;top:20px;left:10%;">联系人</a>
            	<a  a href="" class="mid" style="position: absolute;top:20px;left:30%;">分组</a>
            	<a  a href="" class="right" style="position: absolute;top:20px;left:50%;">QQ空间</a>
            </div>

           
            	<div class="talk" id="talk">
                    <ul id="ul1">
                        <li>
                            <p style="position:absolute;top:-35px;">与 &nbsp;<strong style="color:#ff6600;"><?php echo $per_res['username']; ?></strong>&nbsp;聊天中...</p>

                            <!-- 展示聊天内容 -->
                            <?php foreach ($all as $key => $value): if($_SESSION['id'] === $value['fid']  && ($per_res["id"] != '')){ ?>
                                <p>
                                   <strong class="a" style="color:blue;"> 
                                        <?php echo $res['username']; ?>
                                   </strong>
                                   
                                   <span style="color:red;">说：</span>　
                                   <?php  echo $value['content']; ?>　
                                   <span style="color:red;"><?php echo date('H:i',$value['addtime']);  ?></span>
                                </p>
                            
                            <?php } else{  ?>
                                <p>
                                   <strong class="b" style="color:green;"> 
                                        <?php echo $per_res['username']; ?>
                                   </strong>
                                   
                                   <span style="color:red;">说：</span>　
                                   <?php  echo $value['content']; ?>　
                                   <span style="color:red;"><?php echo date('H:i',$value['addtime']); ?></span>
                                </p>

                            <?php    } ?>
                            <?php endforeach  ?>
                            
                        </li>
                    </ul>
            	   
            		
            	</div>

                
           
        	<div class="send">
        		<textarea id="txt" style="width:350px;height:80px;" type="text" name="content">
                </textarea>
            

        		<input type="submit" name="submit" value="发送" id="send"></input>
        	</div>
        	
        </div>

        <div class="footer">
        	<a href="friend.php" style="position: relative;left:30px;top:20px;">添加联系人</a>
        	<a href="index.php?action=logout" style="position: relative;left:250px;top:20px;">退出</a>
        </div>
   	
    </div>
    </form>
	
</body>
</html>
<script src="move.js"></script>
<script type="text/javascript">
    
    window.onload = function(){
        //获取元素
        var oBtn = document.getElementById('send');
        var oUl = document.getElementById('ul1');
        var aLi = oUl.getElementsByTagName('li');
        var oTxt = document.getElementById('txt');

        oBtn.onclick = function(){

            var oP = oLi.createElement('p');
            oP.innerHTML = oTxt.value;
            oTxt.value = '';

            aLi.appendChild(oP);
           
        
            //运动
            var iHeight = oP.offsetHeight;
            
            oP.style.height = '0';

            startMove(oP,{height:iHeight});
        }
   

    }


  
   

    
    //判断假如li已存在，从最后继续插入li
    // if(aLi.length>0){
    //     oUl.insertBefore(oLi,aLi[0]);
    // }else{
    //     oUl.appendChild(oLi); //假如li未存在，创建一个li,并添加到ul下
    // }
    

   
   


</script>